<template>
    <pos-dialog title="Load a customer profile" :visible="visible" @close="close">
        <div style="min-height: 400px;">
            <search-customer @select="select"/>
            <div class="pos-customer-container" v-if="customer.id">
                <div class="customer-current">
                    <img :src="customer.avatar_url" class="avatar" alt="">
                    <div class="name">{{ customer.last_name }} {{ customer.first_name }}({{ customer.email }})</div>
                    <div class="remove" @click="clear"><i class="yith-pos-icon-clear"></i>Remove</div>
                </div>

                <div class="customer-info-box" @click="create">
                    <div class="customer-info-box__row"><strong>Name:</strong> {{ customer.last_name }}
                        {{ customer.first_name }}
                    </div>
                    <div class="customer-info-box__row">
                        <strong>Billing address:</strong>
                        <span>
                            {{ customer.billing.address_1 }}
                            {{ customer.billing.city }}
                            {{ customer.billing.country }}
                        </span>
                    </div>
                    <div class="customer-info-box__row">
                        <strong>Shipping address:</strong>
                        <span>
                            {{ customer.shipping.address_1 }}
                            {{ customer.shipping.city }}
                            {{ customer.shipping.country }}
                        </span>
                    </div>
                    <i class="customer-info-box__edit yith-pos-icon-pencil"></i>
                    <div class="customer-info-box__error">
                        The following fields are required for billing details: first name, last name, email.
                    </div>
                    <div class="customer-info-box__error">
                        The following fields are required for shipping details: first name, last name.
                    </div>
                </div>

                <div>
                    <button class="btn btn-primary btn-block text-uppercase" @click="submit">Use this customer profile
                    </button>
                </div>

                <div class="text-center">
                    You can also
                    <a class="text-primary" @click="create">Create a new customer profile</a> or
                    <a class="text-primary">Proceed as guest</a>
                </div>
            </div>
        </div>
    </pos-dialog>
</template>

<script>
import SearchCustomer from "./SearchCustomer.vue";

export default {
    name: "LoadCustomer",
    components: {SearchCustomer},
    props: {
        value: false
    },
    data() {
        return {
            visible: false,
            customer: {}
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        select(c) {
            this.customer = c;
        },
        clear() {
            this.customer = {};
            this.$emit('remove');
        },
        submit() {
            this.$emit('submit', this.customer);
            this.close();
        },
        create(){
            this.$emit('create');
            this.close();
        }
    },
    created() {
        this.visible = this.value;
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>